let overLayer =  {
    polylines: [],
    polygons: [],
    measurements: []
};
let tempGp = {
    lineNode: [],
    lineNodeLen: 0,
    tempLine: null,
    polygonNode: [],
    polygonNodeLen: 0,
    tempNode: [],
    tempPolygon: null,
    tempMeasure: null
};
let domNode;
let tipDiv;


export const measurePolyline = function(){
  clearTemps();
  createTooltip(leafletMap.getContainer());
  leafletMap.doubleClickZoom.disable();
  let tempPolygonOpts = {
    color: "rgba(255, 0, 0, 0.85)",
    weight: 3,
    opacity: 0.85,
    showMeasurements: true,
    measurementOptions: { minDistance: 500 }
  };

  let finalPolygonOpts = {
    color: "rgba(0, 255, 0, 0.85)",
    weight: 3,
    opacity: 0.85,
    showMeasurements: true,
    measurementOptions: { minDistance: 500 }
  };

  leafletMap.on("click", evt => {
    tempGp.lineNode.push([evt.latlng.lat, evt.latlng.lng]);
    tempGp.tempNode.push(addNode(evt.latlng, leafletMap));
    tempGp.lineNodeLen = tempGp.lineNode.length;
  });

  leafletMap.on("mousemove", evt => {
    showAt(leafletMap.latLngToContainerPoint(evt.latlng));
    if (tempGp.lineNodeLen >= 1) {
      if (tempGp.tempLine) tempGp.tempLine.remove();
      tempGp.lineNode[tempGp.lineNodeLen] = [
        evt.latlng.lat,
        evt.latlng.lng
      ];
      tempGp.tempLine = L.polyline(tempGp.lineNode, tempPolygonOpts);
      tempGp.tempLine.addTo(leafletMap);
    }
  });

  leafletMap.on("dblclick", () => {
    tipDiv.style.display = 'none'
    endPopu(tempGp.lineNode[tempGp.lineNode.length - 1],"polyline");
    drawOff();
    leafletMap.doubleClickZoom.enable();

  });
};
export const measurePolygon = function() {
  clearTemps();
  createTooltip(leafletMap.getContainer());
  leafletMap.doubleClickZoom.disable();

  let tempPolygonOpts = {
    color: "rgba(0, 255, 0, 0.85)",
    weight: 3,
    opacity: 0.85,
    showMeasurements: true,
    measurementOptions: { minDistance: 500 }
  };

  let finalPolygonOpts = {
    color: "rgba(255, 0, 0, 0.85)",
    weight: 3,
    opacity: 0.85,
    showMeasurements: true,
    measurementOptions: { minDistance: 500 }
  };

  leafletMap.on("click", evt => {
    tempGp.polygonNode.push([evt.latlng.lat, evt.latlng.lng]);
    tempGp.polygonNodeLen = tempGp.polygonNode.length;

    tempGp.tempNode.push(addNode(evt.latlng, leafletMap));
  });

  leafletMap.on("mousemove", evt => {
    showAt(leafletMap.latLngToContainerPoint(evt.latlng));
    if (tempGp.tempPolygon) tempGp.tempPolygon.remove();
    if (tempGp.polygonNodeLen === 1) {
      tempGp.polygonNode[tempGp.polygonNodeLen] = [
        evt.latlng.lat,
        evt.latlng.lng
      ];
      tempGp.tempPolygon = L.polyline(
        tempGp.polygonNode,
        finalPolygonOpts
      );
    } else if (tempGp.polygonNodeLen >= 2) {
      tempGp.polygonNode[tempGp.polygonNodeLen] = [
        evt.latlng.lat,
        evt.latlng.lng
      ];

      tempGp.tempPolygon = L.polygon(
        tempGp.polygonNode,
        finalPolygonOpts
      );
      tempGp.tempPolygon.addTo(leafletMap);
    }
  });

  leafletMap.on("dblclick", () => {
    tipDiv.style.display = 'none'
    endPopu(tempGp.tempPolygon.getBounds().getCenter(),"polygon");
    drawOff();
    leafletMap.doubleClickZoom.enable();
  });
};
function addNode(latlng, leafletMap) {
  let node = L.icon({
    iconUrl: "static/image/node2.png",
    iconSize: [10, 10]
  });
  node = L.marker(latlng, {
    icon: node
  });
  node.addTo(leafletMap);
  return node;
}
function endPopu(latlng,poly){
  //插件自带的测量结果显示
  let endDiv = document.getElementsByClassName("leaflet-measure-path-measurement");
  endDiv[endDiv.length-1].style.display = 'none';

  //把默认测量的结果放置到自定义的div里
  document.getElementsByClassName("tip-layer")[0].innerHTML = endDiv[endDiv.length-1].children[0].innerHTML;
  let divDom = document.getElementsByClassName("total-popup-content")[0];
  let myIcon = L.divIcon({
    html: divDom,
    className: 'leaflet-my-marker',
  });
  if(poly === "polygon") {
    divDom.style.transform = "translateX(-50%) translateY(-50%)";
  }else {
    divDom.style.transform = "translateX(10%) translateY(-50%)";
  }
  divDom.style.display = '';
  L.marker(latlng, { icon: myIcon }).addTo(leafletMap);
  divDom.parentNode.style.margin = 0;

}
export const clearTemps = function() {
  try {
    document.getElementsByClassName("total-popup-content")[0].style.display = 'none';
  }catch (e) {

  }
  // 清空线中间数据
  tempGp.polygonNode = [];
  tempGp.polygonNodeLen = 0;
  if (tempGp.tempPolygon) tempGp.tempPolygon.remove();

  // 清空面中间数据
  tempGp.lineNode = [];
  tempGp.lineNodeLen = 0;
  if (tempGp.tempLine) tempGp.tempLine.remove();
  tempGp.tempNode.map(el => el.remove());


  document.getElementById("main").appendChild(document.getElementsByClassName("total-popup-content")[0]);
  try {
    document.getElementsByClassName("leaflet-my-marker")[0].parentElement.removeChild(document.getElementsByClassName("leaflet-my-marker")[0]);
  }catch (e) {}

};
function drawOff() {
  // 移除监听地图点击事件
  leafletMap.off("click");
  leafletMap.off("mousemove");
  leafletMap.off("dblclick");
  leafletMap.doubleClickZoom.enable();
}
function createTooltip(frameDiv) {
  if(!tipDiv){
    tipDiv = document.createElement("div")
    tipDiv.id = 'leaflet-toolTip'
    tipDiv.style.zIndex = 1000
    tipDiv.style.display = ""
    tipDiv.style.position = "absolute"
    tipDiv.style.backgroundColor = "#000000"
    tipDiv.style.maxWidth = "200px"
    tipDiv.style.color = "white"
    tipDiv.style.borderRadius = "4px"
    tipDiv.style.textAlign = "center"
    tipDiv.style.opacity = "0.8"
    tipDiv.style.pointerEvents = 'none'
    tipDiv.style.padding = "4px"
    tipDiv.style.fontSize = "8px"
    document.body.appendChild(tipDiv)
  }
}
function showAt(position) {
  tipDiv.style.display = ""
  if (position) {
    tipDiv.innerHTML = "单击选择节点，双击结束测量";
    tipDiv.style.left = position.x + 10 + "px";
    tipDiv.style.top = (position.y - tipDiv.clientHeight / 2) + "px";
  }
}
